<template>
	<main-content>
		<z-paging ref="paging" v-model="listData" @query="getList" @loadingStatusChange='nextPage'>
			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->

			<view class="home-body">
				<view class="count-box p-16 ">
					<view class="total-box grow flex justify-content items-center flex-col p-b-16">
						<view class="">
							<text class="total-box-sum">
								{{totalArr.unit=='元'?formatToMoney(countData[totalArr.field]/100):countData[totalArr.field]}}
							</text>
							<text class="total-box-unit">
								{{totalArr.unit}}
							</text>
						</view>
						<text class="total-box-subTitle subTitle-color">{{totalArr.subTitle}}</text>
					</view>
					<view class="flex flex-wrap flex-row justify-between">
						<view class="m-b-8 countList-itemBox" v-for="(item,index) in countList" :key="index">
							<view class="countList-item p-8">
								<view class="countList-item-val">
									{{totalArr.unit=='元'?formatToMoney(countData[item.field]/100):countData[item.field]}}
									{{item.unit}}
								</view>
								<view class="subTitle-color countList-item-subTitle">
									{{item.subTitle}}
									<u-icon name="question-circle-fill" @tap="showTip(item.tip)"
										v-if='!$System.isEmpty(item.tip)' />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="query-box">
					<view class="query-box-view">
						<view class="m-b-8">
							<u-tabs :list="PROFIT_AUDIT_STATUS_A" inactive-color='rgba(153, 153, 153, 1)'
								:active-color='maiColor' :is-scroll="true" v-model="tabVal"
								@change="changeTab"></u-tabs>
						</view>
						<view class="p-x-16 p-b-16">
							<uni-datetime-picker type="daterange" return-type='timestamp' v-model="queryForm.drawTime"
								@change='onChange' :clearIcon='true' />
							<!-- <u-search placeholder="请输入代理商名称" :clearabled='true' v-model="queryForm.companyNameLeftLike"
								:show-action="false" shape='square' @input="onSearch"></u-search> -->

						</view>
					</view>
				</view>
				<view class="flex flex-col"> <!-- style="height: 100vh;" -->
					<view class="content-color grow p-y-16" v-if="total > 0">
						<view class="my-card-border" v-for="(item,index) in listData" :item='item.id'>
							<u-card :foot-border-top='false' :head-border-bottom='false' :show-foot='false'
								margin='0rpx 30rpx 16rpx' @click='showView(item)'>
								<template #head>
									<view class="flex flex-row justify-between">
										<group-title>
											<template #icon>
												<view class="main-color">
													<u-icon name="title-icon" custom-prefix="custom-icon" />
												</view>
											</template>
											{{parseTime(item.drawTime)}}</group-title>
										<view class="">
											{{selectDictLabel(PROFIT_AUDIT_STATUS,item.auditStatus)}}
										</view>
									</view>
								</template>
								<template #body>
									<view class="flex flex-row justify-between m-b-8">
										<view class="list-title">
											提现金额
										</view>
										<view class="list-value">
											{{item.drawAmt}}
										</view>
									</view>
									<view class="flex flex-row justify-between">
										<view class="list-title">
											提现后余额
										</view>
										<view class="list-value">
											{{item.eAmt}}元
										</view>
									</view>
								</template>
							</u-card>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</main-content>
</template>
<script setup name='index'>
	import {
		reactive,
		ref,
		getCurrentInstance,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		useCommonStore
	} from '@/stores/common.js'
	import {
		useUserStore
	} from '@/stores/user.js'
	import {
		PROFIT_AUDIT_STATUS,
		AUTH_BUSS_TYPE
	} from '@/common/dict.js'
	import {
		debounce,
		selectDictLabel,
		formatToMoney,
		parseTime
	} from '@/common/common.js'
	import {
		TimeUtils
	} from '@/common/myDay.js'
	import {
		profitApi
	} from '@/pages-menus/common/api/profit/index.js'
	const commonStore = useCommonStore()
	const {
		proxy
	} = getCurrentInstance()

	const totalArr = ref({
		field: 'balanceAmt',
		subTitle: '佣金账户余额',
		unit: '元'
	})

	const countList = ref(
		[{
			field: 'availableAmt',
			subTitle: '可用金额',
			unit: '元'
		}, {
			field: 'freezeAmt',
			subTitle: '冻结金额',
			unit: '元'
		}, {
			field: 'sumAmt',
			subTitle: '累计结算金额',
			unit: '元'
		}, {
			field: 'unDrawnAmt',
			subTitle: '累计未结算金额',
			unit: '元'
		}, {
			field: 'drawnedAmt',
			subTitle: '累计已提现金额',
			unit: '元'
		}, {
			field: 'receivedAmt',
			subTitle: '已到账金额',
			unit: '元'
		}]
	)

	const countData = ref({
		balanceAmt: 0, //佣金账户余额
		receivedAmt: 0, //已到账金额
		unDrawnAmt: 0, //累计未结算金额
		availableAmt: 0, //可用金额
		id: 0, //分润账户编号
		drawnedAmt: 0, //累计已提现金额
		sumAmt: 0, //累计结算金额
		freezeAmt: 0, //冻结金额
	})

	function getData() {
		let mydata = {
			cTimeBegin: TimeUtils.getDayStart().valueOf(),
			cTimeEnd: TimeUtils.getDayEnd().valueOf(),
			id: useUserStore().userInfo.id, //商户编号
			pageNo: 1,
			pageSize: 10,
		}
		profitApi.findId(mydata).then(res => {
			countData.value = res.data
		})
	}

	let PROFIT_AUDIT_STATUS_A = [{
		name: '全部'
	}, ...PROFIT_AUDIT_STATUS]

	const maiColor = computed(() => {
		return proxy.$System.maiColor.value
	})

	const initForm = {
		drawTime: [], //TimeUtils.getDayStart().valueOf(), TimeUtils.getDayEnd().valueOf()
		drawTimeBegin: undefined, //TimeUtils.getDayStart().valueOf()
		drawTimeEnd: undefined, //TimeUtils.getDayEnd().valueOf()
		auditStatus: undefined, //状态，0正常使用，1禁止开代理商，2禁止开商户，3禁止操作人员登录，4系统停止使用，5停止全部收款，6全部禁用
		pageNo: 1,
		pageSize: 10,
	}
	const queryForm = ref({
		...initForm
	})
	const tabVal = ref(0)
	const changeTab = (val) => {
		// resetQuery()
		queryForm.value.auditStatus = PROFIT_AUDIT_STATUS_A[val].value
		paging.value.reload()
	}
	const onSearch = (value) => {
		paging.value.reload()
	}

	const onChange = (val) => {
		if (proxy.$System.isEmpty(val)) {
			queryForm.value.drawTimeBegin = undefined
			queryForm.value.drawTimeEnd = undefined
		} else {
			queryForm.value.drawTimeBegin = TimeUtils.getDayStart(val[0]).valueOf()
			queryForm.value.drawTimeEnd = TimeUtils.getDayEnd(val[1]).valueOf()
		}
		onSearch()
	}

	const paging = ref(null)

	const total = ref(0)
	const listData = ref()
	const getList = async (pageNo, pageSize, ) => {
		// 统一显示加载框
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		queryForm.value.pageNo = pageNo ?? 1
		queryForm.value.pageSize = pageSize ?? 10
		let res = await profitApi.page(queryForm.value)
		// listData.value = res.data
		total.value = res.total
		paging.value.complete(res.data);
		// 隐藏加载框
		uni.hideLoading()
	}

	const scrollTop = ref(0)
	// 重置查询条件
	function resetQuery() {
		total.value = 0
		scrollTop.value = 0
		queryForm.value = {
			...initForm
		}
	}

	// 下拉刷新被触发
	const onRefresh = () => {
		// 告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
		paging.value.complete();
	}

	// 底部状态
	const moreMap = ref()
	const moreStatus = ref('loading')
	// 下一页
	const nextPage = (val) => {
		console.log('val', val);
		moreStatus.value = val
	}

	const showView = (row) => {
		proxy.$System.goTo('/pages-menus/pages/profit/form', {
			type: 'view',
			id: row.id
		})
	}
	onLoad(async (options) => {
		uni.setNavigationBarColor({
			frontColor: '#ffffff', // 导航栏标题颜色，只能是'black'或'white'
			backgroundColor: proxy.$System.maiColor.value // 导航栏背景颜色
		})
		getData()
		// 动态设置标题
		// uni.setNavigationBarTitle({
		// 	title: '标题'
		// })
	})
	onReady(() => {
		// paging.value.reload()
	})
</script>
<style lang='scss' scoped>
	.data-theme-agent .home-body,
	.data-theme-merchant .home-body {
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: var(--maiColor);
	}

	.data-theme-agent .home-body {
		background-image: url('/static/images/index_bg_agent.png');
	}

	.data-theme-merchant .home-body {
		background-image: url('/static/images/index_bg_mch.png');
	}

	.count-box {
		display: flex;
		flex-direction: column;
		height: 596rpx;
	}

	.total-box {
		color: #fff;
	}

	.total-box-sum {
		font-size: 64rpx;
		font-weight: 600;
	}

	.total-box-unit {
		padding-left: 20rpx;
		font-size: 36rpx;
	}

	.total-box-subTitle {
		font-size: 28rpx;
	}

	.subTitle-color {
		color: rgba(255, 255, 255, 0.5);
	}

	.countList-itemBox {
		width: calc((100% - 16rpx)/2);
	}

	.countList-item {
		border-radius: 16rpx;
		background: rgba(0, 0, 0, 0.1);
	}

	.countList-item-val {
		font-size: 32rpx;
		padding-bottom: 8rpx;
		color: rgba(255, 255, 255, 1);
	}

	.countList-item-subTitle {
		font-size: 24rpx;
	}

	.query-box {
		position: relative;
		z-index: 1;

		.query-box-view {
			background-color: #fff;
			border-radius: 16rpx 16rpx 0 0;
			overflow: hidden;
		}

		&:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			background-color: var(--maiColor);
			width: 100%;
			height: 50%;
			display: block;
		}
	}

	:deep(.zp-paging-container) {
		background-color: #F6F7F9;
	}

	:deep(.u-card .u-card__head) {
		padding: 15px 15px 0 15px !important;
	}

	:deep(.u-card .u-card__foot) {
		padding: 0 15px 15px 15px !important;
	}
</style>